const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    // 打包入口文件
    entry: {
        main: path.join(__dirname, './src/main.js')
    },
    // 打包出口文件
    output: {
        // 输出目录
        path: path.join(__dirname, 'dist'),
        // 输出文件名
        filename: '[name].[contenthash:8].js'
    },
    module: {
        rules: [
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre', // 编译前检查
                exclude: /node_modules/, // 不检测的文件
                include: [path.resolve(__dirname, 'src')] // 指定检查的目录
            },
            {	// vue文件loader
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {		// css文件loader
                test: /\.css(\?.*)?$/,
                use: [	// loader 顺序不能乱
                    'vue-style-loader',
                    'style-loader',
                    'css-loader'
                ]
            },
            {       // less文件loader
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            { // 配置Babel将ES6+ 转换为ES5
                test: /\.js(\?.*)?$/,
                exclude: /node_modules/, // 不检测的文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        // plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            { // 配置图片文件加载
                test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024,
                        esModule: false
                    }
                }
            }
        ]
    },
    resolve: {
        // 引入文件时可以省略文件后缀名
        extensions: ['.js', '.json', '.vue']
    },
    plugins: [
        new VueLoaderPlugin(),		// vue-loader 加载插件
        new CleanWebpackPlugin(),	// 每次打包前清除打包输出目录文件
    ]
}

